import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { WalletOutlined, HistoryOutlined, InboxOutlined, UserOutlined } from '@ant-design/icons';

export default function MainLayout() {
  const navigate = useNavigate();
  const location = useLocation();

  const navItems = [
    { path: '/balance', icon: <WalletOutlined />, label: '余额' },
    { path: '/transactions', icon: <HistoryOutlined />, label: '交易' },
    { path: '/wines', icon: <InboxOutlined />, label: '寄存酒' },
    { path: '/profile', icon: <UserOutlined />, label: '我的' }
  ];

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)',
      paddingBottom: 70
    }}>
      <Outlet />

      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        height: 60,
        background: 'rgba(0, 0, 0, 0.9)',
        backdropFilter: 'blur(20px)',
        borderTop: '1px solid rgba(212, 175, 55, 0.2)',
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        zIndex: 1000,
        boxShadow: '0 -4px 12px rgba(0, 0, 0, 0.3)'
      }}>
        {navItems.map(item => {
          const isActive = location.pathname === item.path;
          return (
            <div
              key={item.path}
              onClick={() => navigate(item.path)}
              style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                fontSize: 24,
                color: isActive ? '#d4af37' : 'rgba(255, 255, 255, 0.5)',
                transition: 'all 0.3s'
              }}
            >
              {item.icon}
              <span style={{
                fontSize: 12,
                marginTop: 4,
                fontWeight: isActive ? 600 : 400
              }}>
                {item.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
